<template>
  <div>
        <div>
          <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/money/List' }">会议室</el-breadcrumb-item>
            <el-breadcrumb-item>会议室管理</el-breadcrumb-item>

          </el-breadcrumb>
        </div>
    <div class="app-container">
      <!-- 讲师列表 -->

      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="teacherQuery.conferencename" placeholder="会议室的名称" suffix-icon="el-icon-search"/>
        </el-form-item>

        <el-form-item>
          <el-select v-model="teacherQuery.conferencetype" clearable placeholder="会议室状态">
            <el-option label="请选择" :value="0"/>
            <el-option label="空闲" :value="1"/>
            <el-option label="使用中" :value="2"/>
          </el-select>
        </el-form-item>


<!--        <el-form-item label="">-->
<!--          <el-date-picker-->
<!--            v-model="teacherQuery.time"-->
<!--            placeholder="会议开始时间"-->
<!--            type="date"-->
<!--            format="yyyy 年 MM 月 dd 日"-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--          />-->
<!--        </el-form-item>-->



        <el-button icon="el-icon-search" type="primary" @click="getmodeList()"
        >查询
        </el-button
        >
        <el-button type="warning" @click="resetData()" icon="el-icon-delete">清空</el-button>
        <div>

          <!-- <el-button @click="toggleSelection()">批量删除</el-button> -->
<!--          <el-button slot="reference" type="danger" @click="toggleSelection()"-->
<!--          >批量删除 <i class="el-icon-remove-outline"></i-->
<!--          ></el-button>-->
          <!--          <el-button class="ml-5" type="success">导入 <i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->


          <!--          <el-button type="info" @click="daochu" >导出 <i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
        </div>
      </el-form>

      <!--      <el-form label-width="120px">-->
      <!--        <el-form-item label="信息描述">-->
      <!--          <el-tag type="info">excel模版说明</el-tag>-->
      <!--          <el-tag>-->
      <!--            <i class="el-icon-download"/>-->
      <!--            <a :href="'/static/stu.xlsx'">点击下载模版</a>-->
      <!--          </el-tag>-->

      <!--        </el-form-item>-->


      <!--        <el-form-item label="选择Excel" label-width="120px">-->
      <!--          <el-upload-->
      <!--            ref="upload"-->
      <!--            :auto-upload="false"-->
      <!--            :on-success="fileUploadSuccess"-->
      <!--            :on-error="fileUploadError"-->
      <!--            :disabled="importBtnDisabled"-->
      <!--            :limit="1"-->
      <!--            :action="'/studentVue/addSubject'"-->
      <!--            name="file"-->
      <!--            accept="application/vnd.ms-excel">-->
      <!--            <el-button slot="trigger"  type="info"> 点击上传 <i class="el-icon-upload el-icon&#45;&#45;right"/></el-button>-->
      <!--            <el-button-->
      <!--              :loading="loading"-->
      <!--              style="margin-left: 10px;"-->
      <!--              type="success"-->
      <!--              @click="submitUpload">{{ fileUploadBtnText }}</el-button>-->
      <!--          </el-upload>-->
      <!--        </el-form-item>-->

      <!--      </el-form>-->

      <div style="margin: 0px auto">
        <!-- 表格 -->
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          element-loading-text="数据加载中"
          fit
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45"></el-table-column>

          <el-table-column align="center" label="序号" width="70">
            <template slot-scope="scope">
              {{(teacherQuery.page - 1) * teacherQuery.limit + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="会议室名称" width="150">
            <template slot-scope="scope">
              {{ scope.row.conferencename }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="会议室地址" width="150">
            <template slot-scope="scope">
              {{ scope.row.address }}
            </template>
          </el-table-column>

          <el-table-column label="会议室状态" align="center" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.conferencetype === 1">空闲</span>
              <span v-if="scope.row.conferencetype === 2">使用中</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="会议室时间" width="220">
            <template slot-scope="scope">
              {{ scope.row.times }}
            </template>
          </el-table-column>


          <el-table-column align="center" fixed="right" label="操作" width="350">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleAdd"> 新增 <i class="el-icon-circle-plus-outline"></i></el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑会议室</el-button>
              <el-button icon="el-icon-delete" size="mini" type="danger" @click="removeDataById(scope.row.cid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        :current-page="teacherQuery.page"
        :page-size="teacherQuery.limit"
        :page-sizes="[3, 5, 8, 10]"
        :total="total"
        background
        layout="total, sizes ,prev, pager, next, jumper"
        style="padding: 30px 0; text-align: center"
        @current-change="getList"
        @size-change="handleSizeChange"
      />



    </div>

    <el-dialog :visible.sync="dialogFormVisible" title="" width="40%">
      <el-form label-width="80px">
        <!-- <el-form-item label="学号">
          <el-input v-model="form.studentNum" autocomplete="off"></el-input>
        </el-form-item> -->

        <el-form-item label="名称">
          <el-input v-model="teacher.conferencename" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="teacher.conferencetype" clearable placeholder="请选择">
            <el-option label="空闲" :value='1' />
            <el-option label="使用中" :value='2' />
          </el-select>
        </el-form-item>

        <!--          <el-form-item label="员工姓名">-->
        <!--            <el-input v-model="teacher.employee.name" readonly="true" autocomplete="off"></el-input>-->
        <!--          </el-form-item>-->
        <el-form-item label="地址">
          <el-input v-model="teacher.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <div class="block">
            <el-date-picker
              v-model="teacher.times"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00">
            </el-date-picker>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer"  class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :disabled="saveBtnDisabled" @click="saveOrUpdate">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import axios from "axios";

export default {
  //写核心的代码
  // data:{

  // },
  data() {
    //定义变量和初始值
    return {
      uid:null,
      list: null, //查询之后接口返回集合
      // page: 1, //当前页
      // limit: 6, //每页记录数
      total: 0, //总记录数vu
      teacherQuery: {
        conferencetype:0,
        sta:null,
        page: 1, //当前页
        limit: 5, //每页记录数
      }, //条件封装的对象
      multipleSelection: [],//批量删除的ids 需要转成数组
      dialogFormVisible: false,
      teacher: {
        basic: "",
        overpay: "",
        tax: "",
        social: "",
        paytime:'',
        employee:{
          name:''
        }
      },
      saveBtnDisabled: false,
      BASE_API: process.env.BASE_API, // 接口API地址    BASE_API: '"http://localhost:8080"',
      fileUploadBtnText: '上传到服务器', // 按钮文字
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false,//上传的loading
      listLoading: true, // 是否显示loading信息
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    this.getList();
  },
  methods: {
    //创建具体的方法，调用teacher.js定义的方法
    //讲师列表的方法
    handleSizeChange(limit) {
      console.log(limit);

      this.teacherQuery.limit = limit;
      this.getList();
    },
    getList(page = 1) {
      this.teacherQuery.page = page;
      // this.$axios({
      //   method: 'post',
      //   url:"//studentVue/StudentfindAllormodil",
      //   data:  this.teacherQuery
      // })

      this.$axios
        .post("http://localhost:8007/conference/conference/findAllht",
          this.teacherQuery
        )
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          console.log(1111)
          console.log(this.total)
          console.log(this.list)
          console.log(12222111)
          this.listLoading = false  //记得：否显示loading信息
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
    },
    // 条件清空
    resetData() {
      this.teacherQuery = {
        conferencetype:0,
        sta:null,
        page: 1, //当前页
        limit: 5, //每页记录数
      };
      this.getList();
    },
    //模糊查询
    getmodeList(){
      this.getList()
    },

    //删除
    removeDataById(id) {
      const mid =Number(id)
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return this.$axios.delete("http://localhost:8007/conference/conference/removeCon/" + mid);
        })
        .then(() => {
          this.getList(); //回到列表页面
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((response) => {
          // 失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        });
    },



    //下拉框强制更新
    xianThreeChanged(value) {
      this.$forceUpdate(); //强制更新
    },
    //批量删除的ids集合
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    //批量删除 multipleSelection -> 转化成数组
    toggleSelection() {
      let ids = this.multipleSelection.map((v) => v.stuId);
      // console.log(ids);

      this.$confirm("此操作将永久删除" + ids.length + "条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return this.$axios.delete("/studentVue/batchDeletelist/" + ids);
        })
        .then(() => {
          this.getList(); //回到列表页面
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((response) => {
          // 失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        });
    },


    //点击编辑按钮
    handleEdit(row) {

      console.log(row)//拿到当前行的所有数据
      console.log(row.sid)//拿到当前行的id

      //根据id查询的方法
      // this.getInfo(row.stuId);
      // this.initott();
      this.teacher = JSON.parse(JSON.stringify(row))
      // this.uid =String(row.cid)
      console.log(this.teacher)

      this.dialogFormVisible = true
      this.$forceUpdate();
    },

    //打开添加按钮
    handleAdd() {
      this.teacher ={}
      this.dialogFormVisible = true
      console.log(this.teacher)
    },



    //保存按钮
    saveOrUpdate() {
      this.saveBtnDisabled = true; //保存按钮是否禁用（避免重复提交）
      // this.teacher.cid = Number(this.uid)
      // 判断是添加/修改学生的方法
      if (!this.teacher.cid) {
        //添加
        console.log("1");
        console.log(this.teacher);
        this.saveTeacheradd();
      } else {
        //修改
        this.updateTeacher();
        console.log("2");
      }
    },
    sendEmail(row){
      this.teacher = JSON.parse(JSON.stringify(row))

      this.$axios.post("http://localhost:8007/conference/money/sendEmail", this.teacher)
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "发送成功!",
          });
        })
        .then((resposne) => {
          console.log("有发送")
          //先关闭弹窗
          // 调用
          // this.$router.push({ path: "/student/table" });
        })
        .catch((response) => {
          // console.log(response)
          this.$message({
            type: "error",
            message: "发送失败",
          });
        });

    },

    //修改讲师的方法
    updateTeacher() {

      this.$axios.post("http://localhost:8007/conference/conference/updateCon", this.teacher)
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .then((resposne) => {
          //先关闭弹窗
          this.dialogFormVisible = false
          this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
          this.getList();
          // 调用
          // this.$router.push({ path: "/student/table" });
        })
        .catch((response) => {
          // console.log(response)
          this.$message({
            type: "error",
            message: "修改失败",
          });
        });
    },


    // 添加讲师的方法
    saveTeacheradd() {
      this.$axios.post("http://localhost:8007/conference/conference/addMine", this.teacher)
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .then((resposne) => {
          //先关闭弹窗
          this.dialogFormVisible = false
          this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
          this.getList();
          // this.$router.push({ path: "/student/table" });
        })
        .catch((response) => {
          // console.log(response)
          this.$message({
            type: "error",
            message: "添加失败",
          });
        });
    },

    //上传
    submitUpload() { //点击按钮上传文件到接口里面
      this.fileUploadBtnText = '正在上传'
      this.importBtnDisabled = true
      this.loading = true
      //  js:document.getElementById("upload").submit()   upload - id唯一标识
      this.$refs.upload.submit()
    },
    fileUploadSuccess() {//上传成功
      // 提示信息
      this.loading = false
      this.$message({
        type: "success",
        message: "导入成功！"
        // message:response.message
      })
      //通过路由跳转到课程分类列表
      // this.$router.push({path:'/subject/list'})

    },
    fileUploadError() {//上传失败
      // 提示信息
      this.loading = false
      this.$message({
        type: "success",
        message: "导入失败"
        // message:response.message
      })
    },

    //下载
    daochu() {
      this.$axios.get("/studentVue/read")
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "导出成功!",
          });
        })
        .catch(() => {
          return this.$message({
            message: '导出失败！',
            type: 'warning'
          });
        })
    }

  },
};
</script>

<style>
</style>
